<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-wap-web-app-capable" content="yes">
    <meta name="apple-wap-web-app-status-bar-style" content="black-translucent">
    <meta name="MobileOptimized" content="240"/>
    <title>个人设置</title>
    <link rel="stylesheet" href="$!webPath/css/reset.css" />
    <link rel="stylesheet" href="$!webPath/css/style.css" />
    <link rel="stylesheet" href="$!webPath/css/style_my.css" />
    <link href="$!webPath/css/cropper.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="$!webPath/css/jquery.dialogbox.css" />
    <script src="$!webPath/js/jquery.min.js"></script>
    <script src="$!webPath/js/lrz.mobile.min.js"></script>
    <script src="$!webPath/js/lrz.all.bundle.js"></script>
    <script src="$!webPath/js/cropper.min.js"></script>
    <script type="text/javascript" src="$!webPath/js/jquery.dialogBox.js"></script>
    <style>
        .centerContent{
            line-height:60px;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="centerContent">
        <span>头像</span>
        <div class="setAvatar">
            #if($!user.userLocalPicPath)
            <img src="$!user.userLocalPicPath" width="100%">
            #elseif($!user.userWxPicPath)
            <img src="$!user.userWxPicPath" width="100%">
            #else
            <img src="$!webPath/imgs/member.jpg" width="100%">
            #end
        </div>
        <input type="file" accept="image/jpeg,image/jpg,image/png" id="avatar">
    </div>
    <div style="padding-top:10px;">

    </div>
    <div class="centerContent_s">
        <span id="usernick">#if($!user.nickname) $!user.nickname #else $!user.userWxNickname #end</span>
        <input id="nick" value="" style="display: none;"/>
    </div>
    <div class="centerContent_s">
        <span>#if($!user.teamEntity)$!user.teamEntity.name #else 尚无战队 #end</span>
    </div>
    <a href="$!webPath/user/verify_mobile">
        <div class="centerContent_s">
            <span>#if($!user.mobile)$!user.mobile #else 尚未绑定手机 #end</span>
            <div class="centerArrow">
                <img src="$!webPath/imgs/arr-r.png" width="20px">
            </div>
            <div class="setPhone">
                #if($!user.mobile)重新验证#else 去绑定 #end
            </div>
        </div>
    </a>
</div>
<div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0;z-index: 9;">
    <div style="width:100%;position: absolute;top:10px;left:0px;z-index: 999">
        <button class="edit-btn" id='cancleBtn' style="margin-left: 10px;">取消</button>
        <button class="edit-btn" id='confirmBtn' style="float:right;margin-right: 10px;background-color: #459bfc;color:#fff;">确定</button>
    </div>
    <div id="report" style="height: 100%">
        <img src="">
    </div>
</div>
<div id="mask-dialogBox" style="display: none"></div>
</body>
<script>
    $('#usernick').click(function () {
        var str=$('#usernick').text();
        $('#nick').css('display','block');
        $('#nick').val(str);
        $('#usernick').css('display','none');
    })
    $('#nick').blur(function(){
        var str=$('#nick').val();
        $.ajax({
            type:'post',
            url:'$!webPath/user/modifiedNickname',
            data:{nickName:str},
            success: function () {
                $('#usernick').css('display','block');
                $('#usernick').html(str);
                $('#nick').css('display','none');
            },
            error: function () {
                alert('失败');
            }
        })
    })
    jQuery(function() {

    function toFixed2(num) {
        return parseFloat(+num.toFixed(2));
    }

    jQuery('#cancleBtn').on('click', function() {
        jQuery("#showEdit").fadeOut();
        jQuery('#showResult').fadeIn();
        jQuery('#avatar').remove();
        jQuery('.centerContent').append("<input type='file' accept='image/jpeg,image/jpg,image/png' id='avatar'>");
    });

    jQuery('#confirmBtn').on('click', function() {
    jQuery("#showEdit").fadeOut();

        var image = jQuery('#report > img');
        var dataURL = image.cropper("getCroppedCanvas");
        var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
    jQuery("#changeAvatar > img").attr("src", imgurl);
    jQuery('#showResult').fadeIn();
    //将裁剪后的上传
    upload(imgurl);
        jQuery('#avatar').remove();
        jQuery('.centerContent').append("<input type='file' accept='image/jpeg,image/jpg,image/png' id='avatar'>");
    });

    function cutImg() {
    jQuery('#showResult').fadeOut();
    jQuery("#showEdit").fadeIn();
        var image = jQuery('#report > img');
    image.cropper({
        aspectRatio: 1 / 1,
        autoCropArea: 0.8,
        strict: true,
        guides: false,
        center: true,
        highlight: false,
        dragCrop: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        zoom: -0.2,
        checkImageOrigin: true,
        background: false,
        minContainerHeight: 300,
        minContainerWidth: 300
    });
    }
    function upload(editImg){
    jQuery.ajax({
    type:'POST',
    url : '$!webPath/user/uploadPic',
    data: {'base64':editImg},
    success : function(data){
    /* if(data=='200'){
         jQuery(".alert").show();
         jQuery(".alert .alertInfo").html("修改头像成功");
    }else{
        jQuery(".alert").show();
            jQuery(".alert .alertInfo").html("修改头像失败");
    } */
    }

    });
    }
    function doFinish(startTimestamp, sSize, rst) {
        var finishTimestamp = (new Date()).valueOf();
        var elapsedTime = (finishTimestamp - startTimestamp);
    //$('#elapsedTime').text('压缩耗时： ' + elapsedTime + 'ms');

        var sourceSize = toFixed2(sSize / 1024),
        resultSize = toFixed2(rst.base64Len / 1024),
        scale = parseInt(100 - (resultSize / sourceSize * 100));
    jQuery("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
    cutImg();
    }

    jQuery('#avatar').on('change', function() {
        var startTimestamp = (new Date()).valueOf();
        var that = this;
    lrz(this.files[0], {
        width: 800,
        height: 800,
        quality: 0.7
    })
    .then(function(rst) {
    //console.log(rst);
    doFinish(startTimestamp, that.files[0].size, rst);
        return rst;
    }).catch(function(err) {
    // 可以捕捉到错误信息
    // 而且以上的then都不会执行
    jQuery('#mask-dialogBox').dialogBox({
        hasClose: true,
        hasMask: true,
        title: '提示',
        content: '修改头像失败'
    });
    })
    .always(function() {

    });
    });

    });
</script>
</html>
